<!--
 * @Author: xuzehan h935351619@163.com
 * @Date: 2024-07-22 14:31:56
 * @LastEditors: xuzehan h935351619@163.com
 * @LastEditTime: 2024-11-14 15:06:59
 * @FilePath: \linshi\src\views\deviceStatus\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="paramConfig">
        <div class="left">
            <antennaConfig ref="antennaConfig" />
        </div>
        <div class="right">
            <div class="top">
                <div class="top-L">
                    <frequencyConfig ref="frequencyConfig" />
                </div>
                <div class="top-R">
                    <powerAmplifilerConfig ref="powerAmplifilerConfig" />

                </div>
            </div>
            <div class="bottom">
                <div class="bottom-L">
                    <switchConfig ref="switchConfig" />
                </div>
                <div class="bottom-R">
                    <data-relay-state  ref="dataRelayState"/>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import switchConfig from '../deviceStatus/modules/switchConfig.vue'
import powerAmplifilerConfig from '../deviceStatus/modules/powerAmplifilerConfig.vue'
import frequencyConfig from '../deviceStatus/modules/frequencyConfig.vue'
import antennaConfig from '../deviceStatus/modules/antennaConfig.vue'
import DataRelayState from '../deviceStatus/modules/DataRelayState.vue'
export default {
    name: 'OperationalParameters',
    components: {
        switchConfig, powerAmplifilerConfig, frequencyConfig, antennaConfig,
        DataRelayState
    }

}
</script>

<style lang="less" scoped>
.paramConfig {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(100vh - 120px);
    // background: rgba(252, 230, 233, 0.3);

    .left {
        width: 35%;
        height: calc(100vh - 120px);
        // background: rgba(248, 167, 178, 0.3);
    }

    .right {
        width: 64%;
        height: calc(100vh - 120px);
        // background: rgba(226, 235, 194, 0.3);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top {
            width: 100%;
            height: 400px;
            // background: yellow;
            display: flex;
            justify-content: space-between;

            .top-L {
                width: 49%;
                height: 100%;
                // background: aqua;
            }

            .top-R {
                width: 49%;
                height: 100%;
                // background: rgb(180, 114, 171);
            }
        }

        .bottom {
            width: 100%;
            height: calc(100% - 430px);
            // background: rgb(141, 218, 126);
            display: flex;
            justify-content: space-between;

            .bottom-L {
                width: 49%;
                height: 100%;
                // background: aqua;
            }

            .bottom-R {
                width: 49%;
                height: 100%;
                // background: rgb(180, 114, 171);
            }
        }

    }
}
</style>